<template>
  <div class="FoodType">
    <van-nav-bar id="nav" :title="typeName" left-text="" right-text="按钮" @click-left="onClickLeft"
      @click-right="onClickRight">
      <template #left>
        <van-icon name="arrow-left" size="28" />
      </template>
    </van-nav-bar>
    <div class="content_all">
      <div class="sort_container">
        <div class="sort_item" @click="getTypeList">
          <div class="sort_item_container" @click="selectShow1">
            分类
            <van-icon name="arrow-down" />
          </div>
          <section class="sort_detail_type" :class="ssl1 == true? 'canShow':'notShow'">
            <ul class="ListOne">
              <ListOne v-for="(item, index) in typeList" :key="index" :count="item.count" :imgUrl="item.image_url"
                :typeName="item.name" @getIndex="getIndex(index)" :class="selectIndex == index ? 'select':'normal'">
              </ListOne>
            </ul>
            <ul class="ListTwo">
              <ListTwo v-for="(item, index) in OneTypeList" :key="index" :name="item.name" :count="item.count"
                @getsT="getsT(index)">
              </ListTwo>
            </ul>
          </section>

        </div>
        <div class="sort_item" @click="getSortList">
          <div class="sort_item_container" @click="selectShow2">
            排序
            <van-icon name="arrow-down" />
          </div>
          <section class="sort_detail_type">
            <ul :class="ssl2 == true? 'canShow':'notShow'" class="SOR">
              <SortList v-for="(item, index) in SortWay" :key="index" :sortType="item"
                @getSortIndex="getSortIndex(index)"></SortList>
            </ul>
          </section>
        </div>
        <div class="sort_item">
          <div class="sort_item_container">
            筛选
            <van-icon name="arrow-down" />
          </div>
        </div>
      </div>
      <section class="back_cover" :class="bc == true ? 'canShow':'notShow'"></section>
    </div>

    <div class="bodytwo">
      <ul>
        <Shop_List
          :getUrl="'https://elm.cangdu.org/shopping/restaurants?latitude=31.22967&longitude=121.4762&order_by=' + typeId">
        </Shop_List>
      </ul>
    </div>

  </div>
</template>

<script>
  import {
    mapMutations
  } from 'vuex'
  import SortList from '@/components/SortList.vue'
  import ListTwo from '@/components/ListTwo.vue'
  import ListOne from '@/components/ListOne.vue'
  import Shop_List from '@/components/Shop_List.vue'
  export default {
    name: "FoodType",
    data() {
      return {
        bc: false,
        ssl1: false,
        ssl2: false,
        ssl3: false,
        typeList: [],
        OneTypeList: [],
        CtypeName: {
          type: String,
          default: "",
        },
        typeName: {
          type: String,
          default: "",
        },
        typeId: {
          type: Number,
          default: 0
        },
        SortWay: ["智能排序", "距离最近", "销量最高", "起送价最高", "配送速度最快", "评分最高"]
      }
    },
    created() {
      this.typeId = this.$route.query.id;
      this.typeName = this.$route.query.type;
    },
    methods: {
      selectShow2() {
        if (this.ssl2 == true) {
          this.ssl2 = false;
        } else {
          this.ssl2 = true;
          this.ssl1 = false;
        }
        if (this.ssl1 == true || this.ssl2 == true || this.ssl3 == true) {
          this.bc = true;
        } else {
          this.bc = false;
        }
      },
      selectShow1() {
        if (this.ssl1 == true) {
          this.ssl1 = false;
        } else {
          this.ssl1 = true;
          this.ssl2 = false;
        }
        if (this.ssl1 == true || this.ssl2 == true || this.ssl3 == true) {
          this.bc = true;
        } else {
          this.bc = false;
        }
      },
      onClickLeft() {
        if (this.lastRouter == true) {
          this.$router.go(-1);
        }
      },
      onClickRight() {

      },
      getSortList() {

      },
      getSortIndex(index) {
        this.typeId = index;
        this.ssl1 = false;
        this.ssl2 = false;
        this.ssl3 = false;
        this.bc = false;
      },
      getTypeList() {
        this.axios.get("https://elm.cangdu.org/shopping/v2/restaurant/category").then((res) => {
          this.typeList = res.data;
        }).catch((err) => {
          console.log(err);
        })
      },
      getIndex(index) {
        this.CtypeName = this.typeList[index].name;
        this.OneTypeList = this.typeList[index].sub_categories;
        this.OneTypeList.splice(0, 1);
        this.changelistIndex(index);
        console.log(this.OneTypeList)
      },
      ...mapMutations(['changelistIndex']),
      getsT(index) {
        this.typeName = this.CtypeName;
        this.typeId = this.OneTypeList[index].id;
        this.ssl1 = false;
        this.ssl2 = false;
        this.ssl3 = false;
        this.bc = false;
      }
    },
    components: {
      Shop_List,
      ListOne,
      ListTwo,
      SortList
    },
    computed: {
      selectIndex() {
        return this.$store.state.list.listIndex;
      },
    },
  }
</script>

<style lang="less">
  #nav {
    z-index: 99;
    width: 100%;
    /* no */
    background-color: #3090e8;
    text-align: center;
    position: fixed;
    left: 0;
    top: 0;
    height: 78px;
  }

  #nav .van-nav-bar__title {
    font-size: 40px;
    color: #fff;
    line-height: 88px;
  }

  .content_all {
    margin-top: 100px;
    z-index: 99;
    width: 100%;
    position: fixed;
  }

  .van-field__left-icon .van-icon {
    font-size: 0.6rem !important;
    margin-top: 10px;
    margin-right: 10px;
  }

  .van-nav-bar .van-icon {
    font-size: 0.8rem;
    color: #fff !important;
  }

  .van-nav-bar__text {
    color: #fff !important;
  }

  .sort_container {
    position: relative;
    display: flex;
    margin-top: -22px;
  }

  .sort_item {
    background-color: #fff;
    padding: 15px 0;
    width: 33.3%;
  }

  .sort_item_container {
    font-size: 26px;
    color: #333;
    text-align: center;
    border-right: 1px solid #e4e4e4;
  }

  .sort_detail_type {
    z-index: 99;
    top: 100%;
    position: absolute;
    width: 100%;
    left: 0;
    background-color: white;
    border-top: 1px solid #e4e4e4;
  }

  .bodytwo {
    padding-top: 125px;
    border-top: 1px solid #e4e4e4;
  }

  .ListOne,
  .ListTwo {
    height: 800px;
    float: left;
    width: 50%;
    background-color: #f5f5f5;
  }

  .ListTwo {
    box-sizing: border-box;
    overflow-y: scroll;
    padding-left: 15px;
    background-color: #fff;
  }

  .back_cover {
    display: block;
    z-index: 98;
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, .3);
  }

  .canShow {
    display: block;
  }

  .notShow {
    display: none;
  }

  .SOR {
    padding-left: 20px;
  }
</style>